<template>
  <!-- 我的收藏 -->
  <div class="purse-body">
    <div class="details">
      <div class="details-title">
        个人中心/<span style="color: #3894f8">我的消息</span>
      </div>
      <!-- 搜索 -->
      <div class="search">
        时间：
        <div class="picker">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <p class="ser-btn">搜 索</p>
        <p class="heavy-btn">重 置</p>
      </div>
      <!-- 筛选 -->
      <div class="Sw-table">
        <p
          v-for="(item, index) in selectArr"
          :key="index"
          :class="select == item.id ? 'select-p' : ''"
          @click="handelSelect(item.id)"
        >
          {{ item.name }}
        </p>
      </div>
      <!-- 多选删除 -->
      <div class="dele">
        <p class="Tips" v-if="select == '6'">
          回收站信息保留30天，30天后自动清理
        </p>
        <p
          v-if="select == '6'"
          class="Batch-deletion"
          @click="handelBatchRecovery"
        >
          <i class="el-icon-time"></i>
          批量恢复
        </p>
        <p class="Batch-deletion" @click="handelDele">
          <i class="el-icon-delete"></i>
          批量删除
        </p>
      </div>
    </div>
    <div class="body-box">
      <!-- 表格 -->
      <div class="tabulation">
        <tableMess :tableData="tableData" :select="select"></tableMess>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <div class="paging-body">
          <paging :pagingObj="pagingObj" @pageVal="pageVal"></paging>
        </div>
      </div>
    </div>
    <DeleDialog
      :dialogDele="dialogDele"
      :select="select"
      :num="num"
      @handleCloseDele="handleCloseDele"
      @handleUnderstand="handleUnderstand"
    ></DeleDialog>
  </div>
</template>

<script>
import paging from "../../../../components/paging.vue";
import tableMess from "./components/tableMess.vue";
import DeleDialog from "./components/DeleDialog.vue";
export default {
  data() {
    return {
      pagingObj: {
        currentPage: 1, //当前页
        pageSize: 10, // 一页显示多少个
        totalDevice: 10, //用户总数
      },
      value1: "", // 时间搜索
      select: "1", // 筛选
      selectArr: [
        { name: "全部消息(xx)", id: 1 },
        { name: "系统消息(xx)", id: 2 },
        { name: "中标消息(xx)", id: 3 },
        { name: "已读(xx)", id: 4 },
        { name: "未读(xx)", id: 5 },
        { name: "回收站(xx)", id: 6 },
      ], //筛选数组
      tableData: [
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "1",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "2",
        },
        {
          date: "2016年05月02日10:20",
          data: "尊敬的用户你好，你的vip即将到期",
          type: "系统消息",
          num: "2",
        },
      ], //表格数据
      dialogDele: false, // 删除弹窗
      num: "", // 传参给组件区分样式
    };
  },
  components: { paging, tableMess, DeleDialog },
  methods: {
    //批量恢复
    handelBatchRecovery() {
      this.num = "7";
      this.dialogDele = true;
    },
    // 删除弹窗确认
    handleUnderstand(val) {
      this.dialogDele = !this.dialogDele;
    },
    // 删除弹窗关闭
    handleCloseDele() {
      this.dialogDele = !this.dialogDele;
    },
    // 批量删除
    handelDele() {
      this.num = "6";
      this.dialogDele = true;
    },
    pageVal(val) {
      this.pagingObj.currentPage = val;
    },
    handelSelect(num) {
      this.select = num;
    },
  },
};
</script>

<style scoped lang="less">
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    display: flex;
    flex-direction: column;
    // margin: auto;
    margin: 0 auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }
    .details-title {
      font-size: 17px;
      font-weight: 600;
      margin-top: 10px;
    }
    // 搜索
    .search {
      width: 100%;
      height: 35px;
      margin-top: 10px;
      font-size: 14px;
      .picker {
        width: 250px;
        margin-right: 10px;
      }
    }
    .ser-btn {
      width: 60px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      // border: 1px solid #3291f8;
      background-color: #3894ff;
      border-radius: 5px;
    }
    .heavy-btn {
      margin-left: 10px;
      color: #e99d42;
    }
    // 筛选
    .Sw-table {
      margin-top: 10px;
      p {
        font-size: 16px;
        // font-weight: 400;
        margin-left: 20px;
      }
      .select-p {
        color: #3894ff;
      }
      p:nth-child(1) {
        margin-left: 0px;
      }
    }
    // 批量删除
    .dele {
      position: relative;
      height: 30px;
      margin-top: 5px;
      .Tips {
        font-size: 17px;
        color: #f26161;
      }
      .Batch-deletion {
        width: 110px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        position: absolute;
        color: #ffffff;
        right: 0px;
        text-align: center;
        font-size: 14px;
        background-color: #f26161;
      }
      .Batch-deletion:nth-child(2) {
        right: 120px;
        background-color: #3894ff;
      }
    }
  }
}
.body-box {
  width: 93%;
  min-height: 500px;
  // max-height: 650px;
  margin: auto;
  margin-top: 10px;
  //表格区
  .tabulation {
    min-height: 500px;
  }
  // 底部div放分页
  .paging {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 30px;
    display: flex;
    .paging-body {
      width: 100%;
      right: 0px;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      margin: auto;
    }
  }
}
</style>
